<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zns_style.css" type="text/css">
</head>
<body>
  <div id="playImages" class="play">
      <ul class="big_pic">

          <div class="prev"></div>
          <div class="next"></div>

          <a class="mark_left" href="javascript:;" href=""></a>
          <a class="mark_right" href="javascript:;" href=""></a>

          <div class="bg"></div>
          <li style="z-index: 1"><img src="images/1.jpg" alt=""></li>
          <li><img src="images/2.jpg" alt=""></li>
          <li><img src="images/3.jpg" alt=""></li>
          <li><img src="images/4.jpg" alt=""></li>
          <li><img src="images/5.jpg" alt=""></li>
          <li><img src="images/6.jpg" alt=""></li>
      </ul>

      <div class="small_pic">
          <ul style="width: 390px;">
              <li style="filter: alpha(opacity:1);opacity: 1"><img src="images/1.jpg" alt=""></li>
              <li><img src="images/2.jpg" alt=""></li>
              <li><img src="images/3.jpg" alt=""></li>
              <li><img src="images/4.jpg" alt=""></li>
              <li><img src="images/5.jpg" alt=""></li>
              <li><img src="images/6.jpg" alt=""></li>
          </ul>
      </div>
  </div>

  <script type="text/javascript" src="js/util.js"></script>
  <script>
     var oDiv = document.getElementById('playImages');
     var oBtnPrev = getClass(oDiv,'prev')[0];
     var oBtnNext = getClass(oDiv,'next')[0];
     var oMarkLeft = getClass(oDiv,'mark_left')[0];
     var oMarkRight = getClass(oDiv,'mark_right')[0];

     var oDivSmall = getClass(oDiv,'small_pic')[0];
     var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
     var aLiSmall = oDivSmall.getElementsByTagName('li');

     var oUlBig = getClass(oDiv,'big_pic')[0];
     var aLiBig = oUlBig.getElementsByTagName('li');

     var nowzIndex = 2;
     var now =0;

     oUlSmall.style.width = aLiSmall[0].offsetWidth*aLiSmall.length+'px';

     oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
         startMove(oBtnPrev,{opacity:100})
     };
     oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
         startMove(oBtnPrev,{opacity:30})
     };
     oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
         startMove(oBtnNext,{opacity:100})
     };
     oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
         startMove(oBtnNext,{opacity:30});
     };


     //大小图切换
     for(var i=0;i<aLiSmall.length;i++){

         aLiSmall[i].index = i;

         aLiSmall[i].onclick = function () {

             if(now == this.index) return;

             now = this.index;
             tab();
         };

         aLiSmall[i].onmouseover = function () {
             startMove(this,{opacity:100})
         };
         aLiSmall[i].onmouseout = function () {

             if(this.index !=now ){
                 startMove(this,{opacity:60})
             }

         }
     }

      function tab() {

          aLiBig[now].style.zIndex = nowzIndex++ ;

          for(var i=0;i<aLiSmall.length;i++){
              startMove(aLiSmall[i],{opacity:60});
          }

          startMove(aLiSmall[now],{opacity:100});

          //移动
          if(now == 0){
             startMove(oUlSmall,{left:0});
          }
          else if(now == aLiSmall.length - 1){
              startMove(oUlSmall,{left:-(now-2)*aLiSmall[0].offsetWidth});
          }
          else{
              startMove(oUlSmall,{left:-(now-1)*aLiSmall[0].offsetWidth});
          }

      }

      //上一张下一张
      oBtnPrev.onclick = function () {
          now--;
          if(now == -1){
              now = aLiSmall.length - 1;
          }
          tab();
      }
      oBtnNext.onclick = function () {
         now++;
          if(now == aLiSmall.length){
              now = 0;
          }
          tab();
      };


      var timer = setInterval(oBtnNext.onclick,2000);
      oDiv.onmouseover = function () {
          clearInterval(timer);
      };
      oDiv.onmouseout = function () {
          timer = setInterval(oBtnNext.onclick,2000);
      }







  </script>

</body>
</html>